<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>订单列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-row>
        <!--工具条-->
        <el-form
          :inline="true"
          :model="queryinfo"
          class="toolbar"
          label-position="right"
          label-width="90px"
        >
          <el-row>
            <el-form-item label="手机号">
              <el-input v-model="queryinfo.password" placeholder="请输入手机号"></el-input>
            </el-form-item>
            <el-form-item label="订单编号">
              <el-input v-model="queryinfo.queryString"></el-input>
            </el-form-item>
            <el-form-item label="币种类型">
              <el-select v-model="queryinfo.queryType" placeholder="请选择" clearable>
                <el-option
                  v-for="item in bzType"
                  :label="item.name"
                  :key="item.status"
                  :value="item.status"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="订单状态">
              <el-select v-model="queryinfo.queryId" placeholder="请选择" clearable>
                <el-option
                  v-for="item in isAgainOrder"
                  :label="item.name"
                  :key="item.status"
                  :value="item.status"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="订单类型">
              <el-select v-model="queryinfo.refresh" placeholder="请选择" clearable>
                <el-option
                  v-for="item in orderType"
                  :label="item.name"
                  :key="item.status"
                  :value="item.status"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label>
              <el-button @click="getOrderList" type="primary" size="medium">查询</el-button>
            </el-form-item>
          </el-row>
        </el-form>
      </el-row>
      <el-row>
        <el-table :data="orderlist" style="width: 100%">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-row class="demo-table-expand">
                <el-col :span="12">
                  <el-form label-position="left" inline>
                    <el-form-item label="卖家昵称">
                      <span>{{ props.row.sellUserNickName }}</span>
                    </el-form-item>
                    <el-form-item label="卖家姓名">
                      <span>{{ props.row.sellUserName }}</span>
                    </el-form-item>
                    <el-form-item label="卖家手机号">
                      <span>{{ props.row.sellUserMobile }}</span>
                    </el-form-item>

                    <el-form-item label="卖家收款码">
                      <el-image
                        :src="props.row.payImage"
                        fit="cover"
                        :preview-src-list="sellsrcList"
                        @click="checkimg(props.row.payImage)"
                        style="width:100px;height:100px;"
                      ></el-image>
                    </el-form-item>
                    <el-form-item label="银行卡号">
                      <span>{{ props.row.payAccount }}</span>
                    </el-form-item>
                    <el-form-item label="银行名称">
                      <span>{{ props.row.payBankName }}</span>
                    </el-form-item>
                  </el-form>
                </el-col>
                <el-col :span="12">
                  <el-form label-position="left" inline>
                    <el-form-item label="买家昵称">
                      <span>{{ props.row.buyUserNickName }}</span>
                    </el-form-item>
                    <el-form-item label="买家姓名">
                      <span>{{ props.row.buyUserName }}</span>
                    </el-form-item>
                    <el-form-item label="买家手机号">
                      <span>{{ props.row.buyUserMobile }}</span>
                    </el-form-item>
                    <el-form-item label="买家凭证">
                      <el-image
                        :src="JSON.parse(props.row.certificate)[0]"
                        :preview-src-list="JSON.parse(props.row.certificate)"
                        fit="cover"
                        style="width:100px;height:100px;"
                      ></el-image>
                    </el-form-item>
                  </el-form>
                </el-col>
              </el-row>
            </template>
          </el-table-column>
          <el-table-column label="订单号" prop="uuid"></el-table-column>
          <el-table-column label="CY单价（CNY）" prop="price" width="120"></el-table-column>
          <el-table-column label="总价（CNY）" width="100">
            <template slot-scope="scope">
              <!-- <el-tag type="danger" v-if="scope.row.pay_status === '0'" size="small">未付款</el-tag>
              <el-tag type="success" v-else size="small">已付款</el-tag>-->
              <span>{{getordermoney(scope.row)}}</span>
              <!-- <el-tag type="success" size="small"></el-tag> -->
            </template>
          </el-table-column>
          <el-table-column label="CY出售数量" prop="numbers" width="100"></el-table-column>

          <el-table-column label="手续费费率" prop="fee" width="100"></el-table-column>
          <el-table-column label="手续费（CY）" prop="feeMoney" width="100"></el-table-column>
          <el-table-column label="CY交易总量" prop="feeMoney" width="100">
            <template slot-scope="scope">
              <!-- <el-tag type="danger" v-if="scope.row.pay_status === '0'" size="small">未付款</el-tag>
              <el-tag type="success" v-else size="small">已付款</el-tag>-->
              <span>{{getorderCynum(scope.row)}}</span>
              <!-- <el-tag type="success" size="small"></el-tag> -->
            </template>
          </el-table-column>
          <el-table-column label="订单状态" prop="pay_status">
            <template slot-scope="scope">
              <!-- <el-tag type="danger" v-if="scope.row.pay_status === '0'" size="small">未付款</el-tag>
              <el-tag type="success" v-else size="small">已付款</el-tag>-->
              <el-tag type="success" size="small">{{getorderStatus(scope.row)}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" prop="createTime"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                type="success"
                size="mini"
                v-if="scope.row.status == '6'"
                @click="chacke(scope.row)"
              >查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryinfo.pagenum"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="queryinfo.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </el-row>
    </el-card>
    <el-dialog title="申诉详情" :visible.sync="dialogTableVisible1">
      <div class="apply">
        <!-- <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>申诉订单</el-breadcrumb-item>
                <el-breadcrumb-item>申诉详情</el-breadcrumb-item>
        </el-breadcrumb>-->
        <el-card>
          <el-collapse @change="handleChange" style="min-height:300px;">
            <el-collapse-item
              v-for="(item,i) in detileslist"
              :key="i"
              :title="item.reportMessage"
              :name="index"
            >
              <div>订单号：{{item.orderNo}}</div>
              <div>申诉原因：{{item.reportMessage}}</div>
              <div v-for="(itemImg,index) in item.reportPhotoList" :key="index">
                <ul class="itemUl">
                  <li class="itemli">
                    <!-- <el-image :src="itemImg" style="width: 100%;"></el-image> -->
                    <el-image style="width: 100px; height: 100px" :src="itemImg"></el-image>
                  </li>
                </ul>
              </div>
              <div>买家：{{item.buyUserName}}</div>
              <div>买家手机号：{{item.buyUserMobile}}</div>
              <div>卖家：{{item.sellUserName}}</div>
              <div>卖家手机号：{{item.sellUserMobile}}</div>
            </el-collapse-item>
          </el-collapse>
          <!-- <div></div> -->
          <div style="margin-top: 50px;">
            <el-button size="medium" type="danger" @click="trundown()">拒绝</el-button>
            <el-button size="medium" type="primary" @click="consent()">同意</el-button>
          </div>
        </el-card>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogTableVisible1: false,
      sellsrcList: [],
      detileslist: [],
      isAgainOrder: [
        {
          name: "请选择",
          status: 0,
        },
        {
          name: "进行中",
          status: 1,
        },
        {
          name: "待确认",
          status: 2,
        },
        {
          name: "已完成",
          status: 3,
        },
        {
          name: "已取消",
          status: 4,
        },
        {
          name: "已失效",
          status: 5,
        },
        {
          name: "申诉中",
          status: 6,
        },
        {
          name: "申诉成功",
          status: 7,
        },
        {
          name: "申诉失败",
          status: 8,
        },
      ],
      bzType: [
        {
          name: "全部",
          status: "0",
        },
        {
          name: "CY",
          status: "1",
        },
        {
          name: "USDT",
          status: "2",
        },
      ],
      orderType: [
        {
          name: "全部",
          status: "0",
        },
        {
          name: "CY交易",
          status: "1",
        },
        {
          name: "法币交易",
          status: "2",
        },
      ],
      srcList: [
        "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
        "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg",
      ],
      src:
        "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
      tableData: [
        {
          id: "12987122",
          name: "好滋好味鸡蛋仔",
          category: "江浙小吃、小吃零食",
          desc: "荷兰优质淡奶，奶香浓而不腻",
          address: "上海市普陀区真北路",
          shop: "王小虎夫妻店",
          shopId: "10333",
        },
        {
          id: "12987123",
          name: "好滋好味鸡蛋仔",
          category: "江浙小吃、小吃零食",
          desc: "荷兰优质淡奶，奶香浓而不腻",
          address: "上海市普陀区真北路",
          shop: "王小虎夫妻店",
          shopId: "10333",
        },
        {
          id: "12987125",
          name: "好滋好味鸡蛋仔",
          category: "江浙小吃、小吃零食",
          desc: "荷兰优质淡奶，奶香浓而不腻",
          address: "上海市普陀区真北路",
          shop: "王小虎夫妻店",
          shopId: "10333",
        },
        {
          id: "12987126",
          name: "好滋好味鸡蛋仔",
          category: "江浙小吃、小吃零食",
          desc: "荷兰优质淡奶，奶香浓而不腻",
          address: "上海市普陀区真北路",
          shop: "王小虎夫妻店",
          shopId: "10333",
        },
      ],
      queryinfo: {
        queryId: "",
        queryString: "",
        password: "",
        pageNo: 1,
        pageSize: 10,
      },
      orderlist: "",
      total: "",
    };
  },
  created() {
    this.getOrderList();
  },
  methods: {
    getorderCynum(row) {
      if (row) {
        // this.accAdd(row.feeMoney,row.numbers)
        return this.accAdd(row.feeMoney, row.numbers);
      }
    },
    getordermoney(row) {
      if (row) {
        return this.accMul(row.price, row.numbers);
      }
    },
    accAdd(arg1, arg2) {
      var r1, r2, m;
      try {
        r1 = arg1.toString().split(".")[1].length;
      } catch (e) {
        r1 = 0;
      }

      try {
        r2 = arg2.toString().split(".")[1].length;
      } catch (e) {
        r2 = 0;
      }
      m = Math.pow(10, Math.max(r1, r2));
      return (arg1 * m + arg2 * m) / m;
    },
    accMul(arg1, arg2) {
      var m = 0,
        s1 = arg1.toString(),
        s2 = arg2.toString();
      try {
        m += s1.split(".")[1].length;
      } catch (e) {}
      try {
        m += s2.split(".")[1].length;
      } catch (e) {}
      return (
        (Number(s1.replace(".", "")) * Number(s2.replace(".", ""))) /
        Math.pow(10, m)
      );
    },
    handleChange(val) {
      console.log(val);
    },
    chacke(row) {
      // console.log(row)
      // POST
      this.dialogTableVisible1 = true;
      // window.open('#/applyDetlie?seen=true&uuid='+row.uuid+
      // '&id='+row.id);
      this.id = row.id;
      this.orderDataDetail(row);
    },
    orderDataDetail(row) {
      //   console.log(this.uuid)
      this.$http
        .post("/manage/otcOrder/getReportOtcOrderInfoByOrderNo", {
          queryString: row.uuid,
        })
        .then((res) => {
          this.detileslist = res.data.data.list;
          console.log(this.detileslist);
          this.srcList = this.detileslist.reportPhotoList;
        });
    },
    trundown() {
      this.$confirm("请仔细确认是否拒绝该申诉, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http
            .post("/manage/otcOrder/changeReportFailure", {
              queryId: this.id,
            })
            .then((res) => {
              if (res.data.status == 1) {
                this.dialogTableVisible1 = false;
                this.getOrderList();
                this.$message({
                  type: "success",
                  message: "申诉已拒绝",
                });
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    consent() {
      this.$confirm("请仔细确认是否通过该申诉, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http
            .post("/manage/otcOrder/changeReportSuccess", {
              queryId: this.id,
            })
            .then((res) => {
              if (res.data.status == 1) {
                this.dialogTableVisible1 = false;
                this.getOrderList();
                this.$message({
                  type: "success",
                  message: "申诉已成功",
                });
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    handleSizeChange(newSize) {
      this.queryinfo.pageSize = newSize;
      this.getOrderList();
    },
    handleCurrentChange(newPage) {
      this.queryinfo.pageNo = newPage;
      this.getOrderList();
    },
    checkimg(img) {
      this.sellsrcList = [];
      // var url = window.location.href;
      // console.log(url)

      console.log(img);
      this.sellsrcList.push(img);
    },
    getorderStatus(row) {
      // 6申诉中7申诉成功8申诉失败
      if (row.status == 1) {
        return "进行中";
      } else if (row.status == 2) {
        return "待确认";
      } else if (row.status == 3) {
        return "已完成";
      } else if (row.status == 4) {
        return "已取消";
      } else if (row.status == 5) {
        return "已失效";
      } else if (row.status == 6) {
        return "申诉中";
      } else if (row.status == 7) {
        return "申诉成功";
      } else if (row.status == 7) {
        return "申诉失败";
      }
    },

    getOrderList() {
      if (this.queryinfo.queryId == "") {
        this.queryinfo.queryId = 0;
      }
      this.$http.post("/manage/otcOrder/list", this.queryinfo).then((res) => {
        if (res.data.status == 1) {
          this.orderlist = res.data.data.list;
          this.total = res.data.data.total;
          //   console.log(this.orderlist[0].certificate)
          // var arr =  ;
          // console.log(arr)
        }
      });
    },
  },
};
</script>
<style lang="less" >
.itemUl {
  list-style-type: none;
}
.itemUl .itemli {
  max-width: 300px;
}
.demo-table-expand {
  font-size: 0;
  // height: 600px;
  background-color: rgb(243, 242, 242);
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 100%;
}
</style>
